<template>
  <div>
    <Header ref="header"></Header>

    <div class="container-pc">
      <div class="setting-container">
        <div class="main-content">
          <div class="left-content">
            <div class="label-item label-active" id="btn_j" @click="bang(1)">
              基本设置
            </div>

            <div class="label-item" v-if="show" id="btn_p" @click="bang(2)">
              修改密码
            </div>
          </div>
          <div class="right-content">
            <div class="label-one" id="label-one">
              <div class="head-pic">
                头像
              </div>
              <div style='width:150px;'>
                <el-upload
                    class="avatar-uploader"
                    action="1"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :http-request="myUpload"
                    :class="{'demo-httpRequestImg':httpRequestImg}"
                >
<!--                  <i class="el-icon-plus"></i>-->
                  <img v-if="dialogImageUrl" :src="dialogImageUrl" alt="" width="100%" >
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" append-to-body class="ImgClass">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
              <div class="nick-name" >
                昵称
              </div>
              <div class="input-wrap"><input id="newNickName" type="text" maxlength="15" placeholder="请输入您的昵称"
                                             class="nick-input" v-model="user.name"> <em class="error" style="display: none;"></em>
                <div class="clear"></div>
              </div>
              <button @click="updateInfo" class="update-info">更新信息</button>
            </div>

            <div v-if="show" class="label-three" id="label-three"  style="display: none;">
              <div class="main-title">
                <div class="title-left">
                  账户密码
                </div>
                <div class="title-right" @click="dialogFormVisible = true">
                  修改密码
                </div>
              </div>
              <div class="sub-title">
                ******
              </div>
            </div>
          </div>
        </div>
        <!---->
        <!-- Form -->
        <el-dialog v-if="show" title="修改密码" :visible.sync="dialogFormVisible">
          <!-- <el-form :model="form"> -->
          <el-form>
            <el-form-item label="原密码">
              <el-input v-model="oldPwd"></el-input>
            </el-form-item>

            <el-form-item label="新密码">
              <el-input v-model="newPwd1"></el-input>
            </el-form-item>

            <el-form-item label="确认新密码">
              <el-input v-model="newPwd2"></el-input>
            </el-form-item>

          </el-form>
          <div class="dialog-footer">
            <el-button class="confirm-button" type="primary" @click="updatePwd">确 定</el-button>
            <el-button class="cancel-button" @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
        <!---->
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条

export default {
  name: 'Setting',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      dialogImageUrl: '',//预览url
      dialogVisibleImg: false,
      httpRequestImg: false,//展示单个图片
      dialogFormVisible: false, // 修改密码的模态框不显示
      dialogVisible: false,// 隐藏的图片文件框
      user: {name:""},// 当前登录的用户对象信息
      fileId: "",// 上传图片后，返回的fastdfs的图片地址
      oldPwd: null,// 旧密码
      newPwd1: null,// 第一次新密码
      newPwd2: null,// 第二次新密码
      origin:null,
      show:false,
    };
  },
  created() {
    // 从已经登录的缓存中获取用户信息
    this.jwt = localStorage.getItem("jwt");
    if (this.jwt == null) {
      this.$router.push("/"); //回到首页
    }else {
      this.getInfo();
      this.origin=localStorage.getItem("origin");
      if(this.origin!=null){
        if(this.origin!="null"){
          if(this.origin==="pd"){
            this.show=true
          }
        }
      }
    }
  },
  computed: {},
  methods: {
    redirectLogin() {
      window.open('/frontLogin.do', '_self');
    },
    getInfo(jwt) {
      return this.axios
          .get("http://localhost:9000/user/user/info", {
            headers: {
              'jwt': this.jwt,
              // 'salt': this.salt
            }
          })
          .then((result) => {
            if (result.data.code === 20001) {
              console.log("==============")
              localStorage.setItem("jwt", null);
              // localStorage.setItem("salt", JSON.stringify(""));
              this.userDTO = null;
              this.isLogin = false;
              this.$message.error(result.data.message);
            } else {
              // debugger;
              this.user = result.data.data.item;
              this.dialogImageUrl=this.user.portrait;
              // this.$refs.header.userDTO=this.user;
              // this.isLogin = true; // 已登录
            }
          }).catch((error) => {
            console.log("setting error " + error)
            this.$message.error("获取用户信息失败！");
          });
    },
    //切换tab页
    bang(i) {
      // alert( i );
      document.getElementById("btn_j").classList.remove("label-active");
      //document.getElementById("btn_b").classList.remove("label-active");
      document.getElementById("btn_p").classList.remove("label-active");

      document.getElementById("label-one").style.display = "none";
      //document.getElementById("label-two").style.display="none";
      document.getElementById("label-three").style.display = "none";

      if (i == 1) {
        document.getElementById("btn_j").classList.add("label-active");
        document.getElementById("label-one").style.display = "block";
      } else {
        document.getElementById("btn_p").classList.add("label-active");
        document.getElementById("label-three").style.display = "block";
      }
    },

    // 上传头像
    myUpload(content) {
      let form = new FormData(); // 必须将表单中的数据进行封装后才能发送，否则传不过去
      form.append("file", content.file);
      // console.log(content);
      // console.log(form);
      this.axios.post("http://localhost:9000/oss/oss/upload/avatar", form,{
        headers: {'jwt': this.jwt}
      })
          .then(result => {
            // 上传成功后，返回的图片fileId
            this.fileId = result.data.data.item;
            console.log(result.data.data.item);// fileId
            this.httpRequestImg = true;
          }).catch((error) => {
        this.$message.error("上传失败！");
      });
      ;
    },
    //更新个人信息
    updateInfo() {
      return this.axios.put("http://localhost:9000/user/user/updateUser/", {
        name: document.getElementById("newNickName").value,
        portrait: this.fileId
      }, {
        headers: {'jwt': this.jwt}
      }).then(result => {
        this.getInfo();
        this.$message.success("更新成功");
        // this.logout();
        this.$router.push("/"); //回到首页
      }).catch((error) => {
        this.$message.error("更新失败！");
      });
    },
    //修改密码
    updatePwd() {
      if (this.oldPwd != null) { // 原密码比对
        if (this.newPwd1 == this.newPwd2) { //两次密码比对
          return this.axios.put("http://localhost:9000/user/user/updatePassword/", {
            password:this.oldPwd,
            password1:this.newPwd1,
            password2: this.newPwd2
          }, {
            headers: {'jwt': this.jwt}
          }).then(result => {
            this.$message.success("更新密码成功,请重新登录！");
            this.dialogFormVisible = false;
            this.logout();
            this.$router.push("/"); //回到首页
          }).catch((error) => {
            this.$message.error("更新失败！");
          });
        } else {
          this.$message.error("两次密码 不一致！！");
          return;
        }
      } else {
        this.$message.error("不能为空！");
        return;
      }
    },
    //登出
    logout() {
      localStorage.setItem("jwt", null); // 将登录成功的对象信息保存到本地储存中
      this.isLogin = false; // 更新登录状态
      // 去检测微信是否登录过
      this.axios
          .get("http://localhost:80/user/logout")
          .then((result) => {
          })
          .catch((error) => {
            //this.$message.error("登录失败！");
          });
      this.$router.push("/");//刷新页面
      this.$router.go(0);//刷新页面
    },


    handlePictureCardPreview(file) { //预览
      this.dialogImageUrl = file.url;
      // this.dialogImageUrl=null;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) { //删除
      this.httpRequestImg = false;
      this.fileId=null;
      console.log(file, fileList);
    },

  },

};
</script>
<style lang="less" scoped>


.demo-httpRequestImg {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}


.login-banner-blank {
  height: 90px;
}

.login-banner {
  overflow: hidden;
  font-size: 0;
  height: 90px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 4;
  background: #fff;
  -webkit-transform: translateZ(0);
  border-bottom: 0.5px solid #E8E9EB;
}

.bg {
  position: absolute;
  width: 120px;
  height: 100%;
  top: 0;
  z-index: -1;
}

.bg-left {
  left: 0;
  transform: rotate(180deg);
}

.bg-right {
  right: 0;
}

.edu-logo {
  float: left;
  width: 84px;
  height: 84px;
  margin-left: 36px;
}

.login-txt {
  font-size: 30px;
  color: #333333;
  margin-left: 16px;
  float: left;
  margin-top: 24px;
}

.login-btn {
  float: right;
  background: #E5F7F3;
  border-radius: 2px;
  width: 122px;
  font-size: 30px;
  color: #00B38A;
  text-align: center;
  font-weight: 400;
  line-height: 30px;
  padding: 15px 0;
  margin-right: 40px;
  margin-top: 15px;
  border: none;
  outline: none;

  &:active {
    background: none;
  }
}

* {
  margin: 0;
  padding: 0;
}

div {
  display: block;
}

.container-pc {
  min-height: calc(100vh - 300px);
  background: #f8f9fa;
  content: "viewport-units-buggyfill; min-height: calc(100vh - 300px)";
}

.setting-container {
  width: 1024px;
  box-sizing: border-box;
  margin: 17px auto 0;
  padding: 0 20px;
}

.setting-container .main-content {
  margin: 66px auto 0;
  height: 400px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.setting-container .main-content .left-content {
  width: 234px;
  height: 100%;
  border-right: 1px solid #eee;
}

.setting-container .main-content .left-content .label-active {
  border-right: 2px solid #e5a817;
  color: #e5a817;
  -webkit-transform: translateX(1.5px);
  transform: translateX(1.5px);
}

.setting-container .main-content .left-content .label-item {
  height: 39px;
  line-height: 39px;
  text-align: right;
  padding-right: 62px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555;
  cursor: pointer;
}

.setting-container .main-content .right-content {
  width: 580px;
  height: 100%;
  margin-left: 67px;
}

.setting-container .main-content .right-content .label-one .head-pic {
  text-align: left;
  height: 39px;
  font-size: 14px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #555;
  line-height: 39px;
}

.setting-container .main-content .right-content .label-one .pic-wrap {
  margin: 8px 8px 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #555;
}

.setting-container .upload-btn {
  width: 98px;
  height: 32px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: right;
  padding: 0 9px;
  line-height: 30px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  font-size: 14px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #555;
  position: relative;
}

.setting-container .upload-btn:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 9px;
  top: 6px;
  cursor: pointer;
  background: url() no-repeat;
  background-size: 100% 100%;
}

.setting-container .upload-btn .av_upload {
  opacity: 0;
  cursor: pointer;
  left: -.04rem;
  top: -.027rem;
  width: 98px;
  height: 32px;
  position: relative;
  z-index: 10;
}

.nick-name {
  padding: 0 12px;
  width: 292px;
}

input {
  font-family: Microsoft Yahei, SimSun, Arial, Helvetica Neue, Helvetica;
}

.nick-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
}

.setting-container .upload-btn .change-text {
  cursor: pointer;
  position: absolute;
  top: -1px;
  left: 31px;
  z-index: 1;
}

.setting-container .main-content .right-content .label-one .nick-name {
  text-align: left;
  margin: 60px 0 20px;
  height: 14px;
  font-size: 14px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #555;
  line-height: 14px;
}

.setting-container .main-content .right-content .label-one .input-wrap {
  position: relative;
  width: 292px;
  height: 40px;
}

.setting-container .main-content .right-content .label-one .update-info {
  display: block;
  margin-top: 40px;
  width: 104px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fcd766;
  border-radius: 3px;
  font-size: 16px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #333;
}

a, button, input {
  outline: 0 none;
}

button, input[type=button], input[type=checkbox], input[type=file], input[type=radio], input[type=reset], input[type=submit], label, select {
  cursor: pointer;
}

button, input, optgroup, select, textarea {
  margin: 0;
  padding: 0;
  border: 1px solid #ededed;
  border-radius: 0;
  font-family: Hiragino Sans GB, Microsoft Yahei, SimSun, Arial, Helvetica Neue, Helvetica;
}

.setting-container .main-content .right-content .label-two {
  margin-top: 12px;
  width: 71%;
  height: 56px;
  box-sizing: border-box;
  padding-left: 76px;
  position: relative;
}

.setting-container .main-content .right-content .label-two .main-title {
  height: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.setting-container .main-content .right-content .label-two .main-title .title-left {
  height: 30px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
  line-height: 30px;
}

.setting-container .main-content .right-content .label-two .main-title .title-right {
  height: 30px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #5580c8;
  line-height: 30px;
  cursor: pointer;
}

.setting-container .main-content .right-content .label-two .sub-title {
  height: 26px;
  font-size: 14px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #555;
  line-height: 26px;
}

.setting-container .main-content .right-content .label-two:before {
  content: "";
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 0;
  background: url() no-repeat;
  background-size: 100% 100%;
}

.setting-container .main-content .right-content .label-three {
  margin-top: 12px;
  width: 71%;
  height: 56px;
  box-sizing: border-box;
}

.setting-container .main-content .right-content .label-three .main-title {
  height: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.password-change-modal-wrap .el-dialog__footer {
  padding: 0 50px 50px;
}

.el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: right;
  box-sizing: border-box;
}

.dialog-footer {
  display: block;
  font-size: 0;
  text-align: left;
}

.confirm-button {
  background: #00b38a;
  color: #fff;
}

.confirm-button {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding: 12px 22px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
}

.cancel-button {
  color: #00b38a;
  margin-left: .053rem;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding: 12px 22px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
}

.setting-container .main-content .right-content .label-three .main-title .title-left {
  height: 30px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
  line-height: 30px;
}

.setting-container .main-content .right-content .label-three .main-title .title-right {
  height: 30px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #5580c8;
  line-height: 30px;
  cursor: pointer;
}

.setting-container .main-content .right-content .label-three .sub-title {
  height: 26px;
  font-size: 14px;
  font-family: HiraginoSansGB-W3, HiraginoSansGB;
  font-weight: 400;
  color: #555;
  line-height: 26px;
}

.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

element.style {
  margin-top: 25vh;
  width: 500px;
}

.el-dialog--center {
  text-align: center;
}

.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  width: 50%;
}

.el-dialog__header {
  padding: 20px 20px 10px;
}

.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
}

.el-icon-close:before {
  content: "\E6DB";
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
  margin: 0;
  padding: 0;
}

.el-dialog__headerbtn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #909399;
}

[class*=" el-icon-"], [class^=el-icon-] {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: initial;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

em, i {
  font-style: normal;
}
</style>